<template>
	<view class="pb120r">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="待支付订单" back @onBack="goBack"
		></navbar>
		<view class="p20r">
			<view class="teAliCenter">
				<view class="foWeiBold f30r">
					剩余支付时间
				</view>
				<view class="lh50r f40r mt20r">
					<view class="pl15r pr15r disInBlo colFff backCol070118 borRad10r">
						{{countNum}}
					</view>
					<view class="disInBlo pl15r pr15r">
						秒
					</view>
					<!-- <view class="w50r disInBlo colFff backCol070118 borRad10r">
						22
					</view> -->
				</view>
			</view>
			<view class="f34r foWeiBold lh90r">
				订单状态：{{orderTText}}
			</view>
			<view class="backColWhite p20r borRad10r disFlex">
				<view class="w200r h200r">
					<image :src="roomData.picZero" mode="aspectFill"
						class="wPer100 hPer100 borRad10r"
						@click="cliBannerImg"
					></image>
				</view>
				<view class="flex1 pl20r disFlex flDirColumn juConSpaBet">
					<view class="foWeiBold f32r webLiCl1 webBoxOrVer overHid disWebBox">
						{{
							roomData.room && roomData.room.name ? roomData.room.name : '（房间名）'
						}}
					</view>
					<view class="webLiCl1 webBoxOrVer overHid disWebBox col7f7f7f">
						{{
							roomData.tea && roomData.tea.name ? roomData.tea.name : '（茶室名）'
						}}
					</view>
					<view class="f24r col999">
						原价¥{{roomData.price}}/小时
					</view>
				</view>
			</view>
			<view class="backColWhite p20r borRad10r mt20r">
				<view class="lh60r f30r foWeiBold">
					订单信息
				</view>
				<view class="disFlex lh70r">
					<view class="w150r col959595">
						订单号
					</view>
					<view class="teAliRight flex1">
						{{roomData.out_trade_no}}
					</view>
				</view>
				<view class="disFlex lh70r">
					<view class="w150r col959595">
						服务时间
					</view>
					<view class="teAliRight flex1">
						<view>
							开始：{{roomData.start_time}}
						</view>
						<view>
							结束：{{roomData.end_time}}
						</view>
					</view>
				</view>
				<view class="disFlex lh70r">
					<view class="w150r col959595">
						服务时长
					</view>
					<view class="teAliRight flex1">
						共{{roomData.hour}}小时
					</view>
				</view>
				<view class="disFlex lh70r">
					<view class="w150r col959595">
						支付方式
					</view>
					<view class="teAliRight flex1">
						微信支付
					</view>
				</view>
				<view class="disFlex lh70r">
					<view class="w150r col959595">
						实付金额
					</view>
					<view class="teAliRight flex1 colFf3627">
						¥{{roomData.amount}}
					</view>
				</view>
				<view class="disFlex lh70r">
					<view class="w150r col959595">
						下单时间
					</view>
					<view class="teAliRight flex1">
						{{roomData.date}}
					</view>
				</view>
			</view>
			<button open-type="contact"
				class="teAliCenter lh80r col99c043 backColWhite mt20r borRad10r f28r bSha0010u0rgb00001 notBtnSty"
			>
				<image :src="baseUrl + 'iconCustomerServiceGreen.png'" mode="aspectFit"
					class="w40r h40r poRel top8r mr10r"
				></image>
				在线客服
			</button>
		</view>
		<view class="poFixed bom0 left0 h100r pt10r teAliRight wPer100 backColWhite pl20r pr20r boSiBorBox borT1SE5e5e5">
			<view class="disInBlo lh80r backColF1bf44 teAliCenter borRad40r w200r mr50r"
				@click="cliNotYetBtn"
			>
				取消支付
			</view>
			<view class="disInBlo lh80r colFff backColE45f58 teAliCenter borRad40r w200r"
				@click="cliContinue1"
			>
				继续支付
			</view>
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { memberGetOrderDetail, reToGetWechatpaymentInfo,
	getTaeRoomDataInfo } from '@/utils/api.js'
import { baseUrl, imgNetUrl } from '@/utils/request.js'
export default {
	components: { navbar },
	data() {
		return {
			baseUrl,
			roomData: {},
			countNum: '',
			orderTText: '待支付'
		}
	},
	onLoad(options) {
		if(options.out_trade_no) {
			memberGetOrderDetail({
				token: uni.getStorageSync('token'),
				out_trade_no: options.out_trade_no
			}).then(res => {
				console.log('options', res)
				this.roomData = res.data;
				this.countNum = res.data.count_down;
				this.setTimeFun();
				if(this.roomData.room && this.roomData.room.pic) {
					this.roomData.picZero = imgNetUrl + this.roomData.room.pic.split(',')[0];
				}
				if(res.data.make_status == 4 || res.data.count_down < 11) {
					this.overtimeFun();
				}
			})
		}
		
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		cliBannerImg() {
			if(this.roomData.room && this.roomData.room.pic) {
				let urls = [];
				this.roomData.room.pic.split(',').forEach(item => {
					urls.push(imgNetUrl + item)
				})
				uni.previewImage({
					current: 0, urls
				})
			}
		},
		cliNotYetBtn() {
			uni.showModal({
				title: '提示', content: `确定取消支付，立即返回？`, confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						uni.navigateBack();
					}
				}
			})
		},
		cliContinue1() {
			reToGetWechatpaymentInfo({ out_trade_no: this.roomData.out_trade_no }).then(res1 => {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res1.data.timeStamp,
					nonceStr: res1.data.nonceStr,
					package: res1.data.package,
					signType: res1.data.signType,
					paySign: res1.data.paySign,
					success:res2 => {
						console.log('支付成功', res2);
						this.cliAppointmentTime2(1, '预订成功', '支付成功', this.roomData.tid, this.roomData.rid);
					}, fail:err2 => {
						console.log('支付失败-err2', err2);
						this.cliAppointmentTime2(2, '预订失败', '您已取消支付', this.roomData.tid, this.roomData.rid);
					}
				})
			})
		},
		cliAppointmentTime2(type, title, content, tid, rid) {
			if(type == 1) {
				uni.requestSubscribeMessage({
				  tmplIds: [
					  '3A5LLFNlLOI8FmuQg1VoTSQ2Z-sgMbdhENmlyfd15FM',//服务完成通知
					  'B8AviMN-18noH7ULHMevdxfu08liKx9vjG16v-LJHEE',//订单即将到期提醒
					  'yQ8VFslxofDFsztSLAEAhz1by8KftlqXeewH6a7ENbE'//订单付款通知
				  ],
				  success:res1 => {
					  console.log('res1', res1)
				  }, fail:err1 => {
					  console.log('err1', err1)
				  }
				})
				getTaeRoomDataInfo({
					tid, rid
				}).then(res => {
					let historyRoomList = uni.getStorageSync('historyRoomList');
					if(historyRoomList == '') historyRoomList = [];
					historyRoomList.push(res.data);
					uni.setStorageSync('historyRoomList', historyRoomList);
				})
			}
			uni.showModal({
				title, content, confirmColor: '#99c043', showCancel: false, confirmText: '我知道了',
				success:res1 => {
					if (res1.confirm) {
						uni.switchTab({ url: '/pages/order/index' })
					}
				}
			})
		},
		setTimeFun() {
			let timer = setInterval(() => {
				if(this.countNum > 0) {
					console.log('this.countNum', this.countNum)
					this.countNum--;
				}else {
					this.orderTText = '已超时';
					this.overtimeFun();
					clearInterval(timer);
				}
			}, 1000);
		},
		overtimeFun() {
			uni.showModal({
				title: '提示', content: `支付超时，请重新下单`, confirmColor: '#99c043',
				showCancel: false, confirmText: '我知道了',
				success:res1 => {
					if (res1.confirm) {
						uni.navigateBack();
					}
				}
			})
		}
	}
}
</script>